<%--
  Created by IntelliJ IDEA.
  User: WangJian
  Date: 2020-11-23
  Time: 21:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>指定类型物品被用户的操作类型</title>
    <%--    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>--%>
    <%--    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>--%>
    <script src="js/jquery.min.js"></script>
    <script src="js/echarts.min.js"></script>
</head>
<body>
<!--<button id="search">查询</button>-->
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1200px;height:750px;top: 0px;left: 150px;"></div>

<script type="text/javascript">

    $(document).ready(function () {

        // 基于准备好的dom，初始化echarts实例
        myChart = echarts.init(document.getElementById('main'));

        option = {
            title: {
                text: "指定类型物品被用户的操作类型",
                subtext: "纯属虚构",
                x: "center"
            },
            tooltip: {
                trigger: "item",
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: "vertical",
                x: "left",
                data: []
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {
                        show: true
                    },
                    dataView: {
                        show: true,
                        readOnly: true
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            calculable: true,
            series: []
        };




        // 页面加载完毕之后，通过ajax加载图标的数据
        $.ajax({
            url: 'useraction',
            method: "get",
            type: "json",
            success: function (data) {
                option.series[0] = data.series;
                option.legend.data = data.legend;
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(data);
            },
            error: function (errMsg) {
                console.error(errMsg)
            }
        });

        /*
        // 为按钮添加点击事件，点击事件中，可以重新加载新数据，并且新加载的数据使用post方法
        $("#search").click(function () {
            $.ajax({
                url: 'useraction',
                method: "post",
                type: "json",
                success: function (data) {
                    option.series[0] = data.series;
                    option.legend.data = data.legend;
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                },
                error: function (errMsg) {
                    console.error(errMsg)
                }
            });
        });
*/
    })

</script>
</body>
</html>
